@()
@main("Genotype-CBGD") {

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Genotype</h2>
		</div>
	</div>
	<form class="registration-form form-horizontal" id="form" accept-charset="UTF-8">
		<label>Select the sample to display:</label>
		<div class="form-group">
			<div class="col-sm-8">
				<select name="sampleNames[]" id="sampleNames" class="checkbox form-control sampleNames" multiple></select>
			</div>
		</div>

		<div class="form-group">
			<div class="actions col-sm-3">
				<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
					Search</button>
			</div>
		</div>
	</form>


	<hr>

	<div id="content">
		<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
		data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true">
			<thead>
				<th data-field='marker' data-sortable='true' id="marker">Marker</th>
			</thead>
		</table>
	</div>

	<script>
			var originalHtml = ""
			$(function () {
				originalHtml = $("#content").html()
				$.ajax({
					url: "@routes.GeneticMapController.getAllSampleNames()",
					success: function (data) {
						$(".sampleNames").select2(
								{
									data: data,
									maximumSelectionLength: 10,
									placeholder: "click to choose",
								}
						);
					}
				});

				$.ajax({
					url: "@routes.GeneticMapController.getAllGenotypes()",
					type: "get",
					dataType: "json",
					success: function (data) {
						$(".sampleNames").val(data.sampleNames).select2()
						var html = ""
						$.each(data.sampleNames, function (i, v) {
							html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
						})
						$("#marker").after(html)
						$('#table').bootstrapTable({
							data: data.array
						});
					}
				})
				formValidation()
			})

			function mySearch() {
				var form = $("#form")
				var fv = form.data("formValidation")
				fv.validate()
				if (fv.isValid()) {
					var index = layer.load(1, {
						shade: [0.1, '#fff']
					});
					$.ajax({
						url: "@routes.GeneticMapController.getAllGeneotypesBySampleNames()",
						type: "post",
						data: $("#form").serialize(),
						success: function (data) {
							var html = ""
							$.each(data.sampleNames, function (i, v) {
								html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
							})
							$("#content").empty().append(originalHtml)
							$("#marker").after(html)
							$('#table').bootstrapTable({
								data: data.array
							});
							layer.close(index)
						}
					});
				}
			}

			function formValidation() {
				$('#form').formValidation({
					framework: 'bootstrap',
					icon: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						'sampleNames[]': {
							validators: {
								callback: {
									message: 'please select a sample！',
									callback: function (value, validator, $field) {
										// Get the selected options
										var options = validator.getFieldElements('sampleNames[]').val();
										return (options != null
												&& options.length >= 1);
									}
								}
							}
						},
					}
				});
			}



	</script>


}